<template>
  <div class="registers">
    <img src="../assets/heading.png" style="width:100%;" alt="">
    <div style="display:flex;flex-direction:column;height:300px;justify-content: space-between;align-items:center;margin-top:20%;">
      <div style="display:flex;justify-content:flex-start;align-items: center;border-bottom:1px solid #c5c5c5;width:90%;margin:0 auto">
        <van-icon name="user-o" color="#5c48c5"/>
        <input v-model="rulm.phone" class="One_input" type="text" style="border:0;outline: none;margin-left:30px;color:#a5a4a4;" placeholder="请输入手机号">
      </div>
      <div style="display:flex;justify-content:flex-start;align-items: center;border-bottom:1px solid #c5c5c5;width:90%;margin:0 auto">
        <van-icon name="eye-o" color="#5c48c5"  />
        <input v-model="rulm.seract" class="One_input" type="password" style="border:0;outline: none;margin-left:26px;color:#a5a4a4;" placeholder="请输入操作密码">
      </div>
      <div style="display:flex;justify-content:flex-start;align-items: center;border-bottom:1px solid #c5c5c5;width:90%;margin:0 auto;">
        <van-icon name="location-o" color="#5c48c5"/>
        <input v-model="rulm.invit_code" class="One_input" type="texgt" style="border:0;outline: none;margin-left:26px;color:#a5a4a4;" placeholder="请输入邀请码">
      </div>
      <div style="display:flex;justify-content:space-around;align-items: center;border-bottom:1px solid #c5c5c5;width:90%;margin:0 auto">
        <van-icon name="points" color="#5c48c5"/>
        <input type="text" class="One_input" style="border:0;outline: none;margin-left:26px;color:#a5a4a4;" v-model="rulm.code" placeholder="输入验证码"/>
        <van-button slot="button" size="small" style="border:1px solid #5c48c5;color:#5c48c5;" plain type="info" :disabled="disabled" @click="onMessage">{{btnTitle}}
        </van-button>
      </div>
    </div>
    <div @click="registers()" style="margin:0 auto;margin-top:10%;display:flex;justify-content: center;align-items: center;border:1px solid #5c48c5;height:40px;width:70%;border-radius:40px;">
      <span style="font-size:20px;color:#946ed3;font-weight:600;">注册</span>
    </div>
    <div @click="$router.push('/Login')" style="margin:0 auto;margin-top:2%;display:flex;justify-content: center;align-items: center;border:1px solid #5c48c5;height:40px;width:70%;border-radius:40px;">
      <span style="font-size:20px;color:#946ed3;font-weight:600;">登录</span>
    </div>

  </div>
</template>

<script>
  import {register,sendcode} from "../api/api";
  import aestool from '@/utils/aestool.js';
  export default {
    name: "register",
    data() {
      return {
        btnTitle: "获取验证码",
        disabled: false,
        rulm: {
          phone: "",
          name: "",
          seract: "",
          code: "",
          invit_code: ""
        }
      }
    },
    mounted() {
      if(this.$route.query.usercode  != undefined){
        this.rulm.invit_code = this.$route.query.usercode
        console.log(this.rulm.invit_code);
      }
    },
    methods: {
      //发送验证码
      onMessage() {
        //判断输入的手机号是否合法
        if (!this.rulm.phone) {
          this.$toast("手机号码不能为空")
        } else if (!/^1[3456789]\d{9}$/.test(this.rulm.phone)) {
          this.$toast("请输入正确是手机号")
        } else {
          //倒计时
          let time = 60;
          let timer = setInterval(() => {
            if (time == 0) {
              clearInterval(timer);
              this.disabled = false;
              this.btnTitle = "获取验证码";
            } else {
              this.btnTitle = time + '秒后重试';
              this.disabled = true;
              time--
            }
          }, 1000)
          let params = {
            phone: aestool.encrypt(this.rulm.phone, '123456asdzxcqwe0')
          }
          sendcode(params).then(res => {
            console.log('验证码', res)
            if (res.Status == 200) {
              this.$toast('发送成功！')
            } else {
              this.$toast(res.Message)
            }
          })
        }
      },
      //注册
      registers() {
        if(this.$route.query.usercode  != undefined){
          var JSONS = parseInt((this.$route.query.sign.replace(/ /g,'+')*3-100)/24)
          console.log(JSONS);
          if(JSONS+24*60*60*1000 > new Date().getTime()){
            this.$toast('二维码已过期，请重新生成')
          }else{
            this.rulm.invit_code = this.$route.query.usercode
            let params = {
              password: this.rulm.seract,
              phone: this.rulm.phone,
              invitation: this.rulm.invit_code,
              code: this.rulm.code
            }
            register(params).then((res) => {
              if(res.Status == 200){
                this.$toast({
                  type:'success',
                  message:'注册成功'
                })
                setTimeout(()=>{
                  this.$router.push('/home')
                },1000)
                localStorage.setItem('xfq_token',res.Data)
              }else{
                this.$toast({
                  type:'error',
                  message:res.Message
                })
              }
            })
          }
        }else{
          let params = {
            password: this.rulm.seract,
            phone: this.rulm.phone,
            invitation: this.rulm.invit_code,
            code: this.rulm.code
          }
          register(params).then((res) => {
            if(res.Status == 200){
              this.$toast({
                type:'success',
                message:'注册成功'
              })
              setTimeout(()=>{
                this.$router.push('/home')
              },1000)
              localStorage.setItem('xfq_token',res.Data)
            }else{
              this.$toast({
                type:'error',
                message:res.Message
              })
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .registers {
    width: 100%;
    height: 100%;
  }

  .One_input{
    font-size:16px;
  }
  .One_input::placeholder{
    color:#a5a4a4;
    font-size:14px;
  }
  .confirms{
    width:80%;
    font-size: 16px;
    border-radius: 10px;
    height: 40px;
    position: absolute;
    bottom: 5%;
    left:10%;
    display: flex;
    color:black;
    font-weight:600;
    justify-content: center;
    align-items: center;
    background:white;
  }
  .yanzheng {
    background-size:100% 100%;
    background:rebeccapurple;
    height:400px;
    width:80%;
    font-size: 18px;
    border-radius:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
